<template>
  <div class="contentMng">
    <!--头部查找-->
    <el-row>
      <el-col :span="5">
        <div class="grid-content bg-purple-dark">
          动态分类管理
        </div>
      </el-col>
      <el-col :span="2" :offset="17">
        <el-button type="primary" size="small" @click="editVisible = true"
          >添加</el-button
        >
      </el-col>
    </el-row>
    <!--动态头条表格列-->
    <el-table
      :data="list"
      border
      style="width: 100%;margin-top:5px;"
      :height="tableHeight"
    >
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column label="名称" align="center">
        <template slot-scope="scope">
          <el-input
            @change="setName(scope.row)"
            v-model="scope.row.dynamic_name"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="排序" align="center">
        <template slot-scope="scope">
          <el-input
            type="number"
            @change="setSort(scope.row)"
            v-model="scope.row.sort"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="handle" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <!-- <el-button @click="" type="primary" size="mini">编辑</el-button> -->
          <el-button
            @click="deleteDynamicClass(scope.row.id)"
            type="info"
            size="mini"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <edit-class
      :visible="editVisible"
      @close="
        editVisible = false;
        getDynamicClassList();
      "
    >
    </edit-class>
  </div>
</template>

<script>
import {
  getDynamicClassList,
  setDynamicClass,
  deleteDynamicClass
} from "@/api/dynamic-mng";
import editClass from "./components/edit-class";
export default {
  name: "dynamicsSort",
  data() {
    return {
      title: "",
      list: [],
      editVisible: false,
      tableHeight: 0
    };
  },
  methods: {
    setName(row) {
      setDynamicClass({
        id: row.id,
        dynamic_name: row.dynamic_name
      }).then(res => {
        if (res.code === 200) {
          this.getDynamicClassList();
        }
      });
    },
    setSort(row) {
      setDynamicClass({
        id: row.id,
        sort: row.sort
      }).then(res => {
        if (res.code === 200) {
          this.getDynamicClassList();
        }
      });
    },
    deleteDynamicClass(id) {
      this.$confirm("确认删除该分类?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteDynamicClass({ id }).then(res => {
          if (res.code === 200) {
            this.getDynamicClassList();
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          }
        });
      });
    },
    getDynamicClassList() {
      getDynamicClassList().then(res => {
        if (res.code === 200) {
          this.list = res.data;
        }
      });
    },
    changeSize() {
      this.tableHeight = document.body.clientHeight - 150;
      window.onresize = () => {
        this.changeSize();
      };
    }
  },
  created() {
    this.getDynamicClassList();
    this.changeSize();
  },
  components: {
    editClass
  }
};
</script>

<style lang="scss" scoped>
.contentMng {
  // width: 98%;
  margin-left: 20px;
  margin-top: 20px;
  .dyNewList {
    overflow: auto;
    margin-top: 20px;
    max-height: 670px;
    .sort {
      display: inline-block;
      width: 80px;
      height: 25px;
      line-height: 25px;
      border: 1px solid #eeeeee;
    }
    .el-table_1_column_3 {
      .cell {
        text-align: center;
      }
      .headPhoto {
        overflow: hidden;
        display: inline-block;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #eeeeee;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .paging {
    float: right;
    margin-top: 20px;
  }
}
</style>
